<template>
	<text
		:class="props._class"
		:style="[
			{ 'font-size': _size + 'rpx' },
			{ color: _color },
			_lineHeight ? { 'line-height': _lineHeight } : {},
			_style,
			props._style,
		]"
		@click="emits('click', $event)"
	>
		{{ props.label }}
	</text>
</template>

<script setup>
import { computed } from 'vue';
import { pub_props, computedColor } from '@/uni_modules/ac-ui/utils/minxs/props';

const sizeObj = {
	'2xs': 22,
	xs: 26,
	sm: 30,
	md: 34,
	lg: 38,
	xl: 42,
	'2xl': 46,
};

const emits = defineEmits(['click']);

const props = defineProps({
	...pub_props,
	label: {
		type: [String, Number],
		default: '',
	},
	fontSize: {
		type: [String, Number],
		default: 32,
	},
	lineHeight: {
		type: [String, Number],
	},
	selectable: {
		type: Boolean,
		default: false,
	},
	block: {
		type: Boolean,
		default: true,
	},
	// 文本颜色。
	color: {
		type: String,
		default: 'gray-900',
	},
	_class: {
		type: String,
	},
	_style: {
		type: Object,
	},
});

const _style = computed(() => {
	let style = {};

	// if (props.block) {
	// 	style['display'] = 'block';
	// }
	// if (!props.selectable) {
	// 	style['user-select'] = 'none';
	// }
	return style;
});

const _color = computed(() => computedColor(props.color, '', props.theme));

const _size = computed(() => {
	if (typeof props.fontSize == 'number') {
		return props.fontSize;
	}
	if (typeof props.fontSize == 'string') {
		return sizeObj[props.fontSize];
	}
});

const _lineHeight = computed(() => {
	if (!props.lineHeight) {
		return;
	}
	if (typeof props.lineHeight == 'number') {
		return props.lineHeight;
	}
	if (typeof props.lineHeight == 'string') {
		return parseInt(uni.upx2px(sizeObj[props.lineHeight])) / 10;
	}
});
</script>

<style scoped>
/* 	text{
		display: block;
	} */
</style>
